<template>
  <div class="index-page">
    <nav-box></nav-box>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide><img style="width: 100%;height: 734px;" src="../assets/images/img1.jpg" alt=""></swiper-slide>

      <swiper-slide><img style="width: 100%;height: 734px;" src="../assets/images/img2.jpg" alt=""></swiper-slide>
      <swiper-slide>
        <div class="photo-word">
          <img style="width: 100%;height: 734px;" src="../assets/images/img3.jpg" alt="">
          <div>
            <span class="sp1"></span>
            <span class="sp2"></span>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="banner">
      <div class="zj">
        <img src="../assets/images/rwznllj.jpg" alt="">
        <div>
          <div>
            <img src="../assets/images/1.png" alt="">
            <div class="zzc"></div>
            <div class="up">
              <span class="hx"></span>
              <span class="tit">多机编队表演</span>
              <span class="ms">精彩 超乎想象</span>
            </div>
            <div class="down">
              查看详情
            </div>
          </div>
          <div>
            <img src="../assets/images/1.png" alt="">
            <div class="zzc"></div>
            <div class="up">
              <span class="hx"></span>
              <span class="tit">一站多机植保</span>
              <span class="ms">科技 倍增效率</span>
            </div>
            <div class="down">
              查看详情
            </div>
          </div>
          <div>
            <img src="../assets/images/1.png" alt="">
            <div class="zzc"></div>
            <div class="up">
              <span class="hx"></span>
              <span class="tit">全面防护探测</span>
              <span class="ms">探索 永无止境</span>
            </div>
            <div class="down">
              查看详情
            </div>
          </div>
        </div>
      </div>
      <div class="news">
        <div class="tips">
          <span></span>
          <span></span>
          <span>媒体中心</span>
          <span></span>
          <span></span>
        </div>
        <div class="list">
          <div v-for="(item,index) in newsData" @click="goNews(index)">
            <img :src="item.cover" alt="">
            <span class="word">{{item.title}}</span>
            <span class="time">{{item.time}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="buy">
      <img src="../assets/images/buynow.jpg" alt="">
      <div>
        <span>立即购买，享优惠套餐</span>
      </div>
    </div>
    <back-to-top></back-to-top>
    <footer-box></footer-box>
  </div>
</template>

<script>

  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import navBox from './common/nav'
  import footerBox from './common/footer'
  import BackToTop from "./common/backToTop";

  export default {
    name: "index",
    data() {
      return {
        swiperOption: {
          direction: 'horizontal',
          loop: true,
          effect: 'fade',
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        newsData: [
          {
            cover: require('../assets/images/1.png'),
            title: "彼帮智能：农业大数据将重构哈哈哈哈哈哈哈哈哈哈",
            time: "2018-5-12"
          },
          {
            cover: require('../assets/images/1.png'),
            title: "彼帮智能：农业大数据将重构哈哈哈哈哈哈哈哈哈哈",
            time: "2018-5-12"
          },
          {
            cover: require('../assets/images/1.png'),
            title: "彼帮智能：农业大数据将重构哈哈哈哈哈哈哈哈哈哈",
            time: "2018-5-12"
          }, {
            cover: require('../assets/images/1.png'),
            title: "彼帮智能：农业大数据将重构哈哈哈哈哈哈哈哈哈哈",
            time: "2018-5-12"
          }
        ]
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {
      goNews(data) {
        switch (data) {
          case 0:
            this.$router.push({name: '新闻详情'});
            break;
          case 1:
            this.$router.push({name: '新闻详情'});
            break;
          case 2:
            this.$router.push({name: '新闻详情'});
            break;
          case 3:
            this.$router.push({name: '新闻详情'});
            break;
        }
      }
    },
    components: {
      BackToTop,
      swiper,
      swiperSlide,
      navBox,
      footerBox
    }
  }
</script>

<style lang="scss" scoped>

  .index-page {
    .swiper-slide {
      height: 734px;
    }
    .swiper-pagination-bullets {
      bottom: 20px;
    }
    .swiper-pagination-bullet {
      background: white;
      width: 15px;
      height: 15px;
      opacity: 1;
      margin: 0 6px !important;
    }
    .swiper-pagination-bullet-active {
      background: #fc8f0f;
    }
    .photo-word {
      width: 100%;
      height: 100%;
      /*background-image: url("../assets/images/img3.jpg");*/
      > div {
        position: absolute;
        top: 195px;
        right: 200px;
        .sp1 {
          font-size: 48px;
          color: #333333;
          font-weight: 600;
          display: block;
          margin-bottom: 10px;
        }
        .sp2 {
          font-size: 28px;
          color: #333333;
          display: block;
        }
      }
    }
    .banner {
      width: 100%;
      height: 100%;
      background: #f2f2f2;
      .zj {
        width: 1200px;
        height: 100%;
        margin: 0 auto 80px;
        padding-top: 60px;
        > img {
          width: 100%;
          height: 460px;
          display: block;
          padding-bottom: 60px;
        }
        > div {
          overflow: hidden;
          zoom: 1;
          > div {
            float: left;
            width: 400px;
            height: 460px;
            position: relative;
            overflow: hidden;
            > img {
              width: 100%;
              height: 100%;
              display: block;
              transition: 1s all;
            }
            .zzc {
              width: 100%;
              height: 100%;
              background: black;
              position: absolute;
              top: 0px;
              transition: .5s;
              opacity: .2;
            }
            .up {
              transition: 1s all;
              position: absolute;
              top: 50%;
              left: 50%;
              width: 200px;
              height: 200px;
              margin-top: -100px;
              margin-left: -100px;
              display: flex;
              flex-flow: column;
              align-items: center;
              .hx {
                width: 48px;
                height: 3px;
                background: white;
                margin-bottom: 40px;
              }
              .tit {
                font-size: 28px;
                color: #ffffff;
                margin-bottom: 20px;
                font-weight: 500;
              }
              .ms {
                font-size: 16px;
                color: #ffffff;
              }
            }
            &:hover .up {
              top: 200px;
            }
            &:hover .down {
              margin-top: 100px;
              opacity: 1;
            }
            &:hover img {
              transform: scale(1.05);
            }
            .down {
              width: 140px;
              font-size: 15px;
              color: white;
              border: 1.5px solid white;
              text-align: center;
              line-height: 40px;
              transition: .5s all;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -70px;
              margin-top: 80px;
              opacity: 0;
              cursor: pointer;
            }
          }
        }
      }
      .news {
        width: 1200px;
        height: 100%;
        margin: auto;
        .tips {
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-bottom: 60px;
          :nth-child(1) {
            width: 490px;
            height: 1px;
            background: #9e9e9e;
          }
          :nth-child(2) {
            width: 6px;
            height: 6px;
            -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
            -o-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            background: #9e9e9e;
          }
          :nth-child(5) {
            width: 490px;
            height: 1px;
            background: #9e9e9e;
          }
          :nth-child(3) {
            font-size: 28px;
            color: #9e9e9e;
          }
          :nth-child(4) {
            width: 6px;
            height: 6px;
            -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
            -o-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            background: #9e9e9e;
          }
        }
        .list {
          display: flex;
          justify-content: space-between;
          margin-bottom: 80px;
          > div {
            width: 285px;
            height: 294px;
            background: white;
            overflow: hidden;
            > img {
              display: block;
              width: 285px;
              height: 215px;
              transition: 1s;
            }
            &:hover img {
              transform: scale(1.03);
            }
            .word {
              display: block;
              width: 240px;
              font-size: 16px;
              color: #333333;
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              margin: 20px 0 8px 20px;
              white-space: nowrap;
            }
            .time {
              display: block;
              margin-left: 20px;
              color: #999999;
              font-size: 14px;
            }

          }
        }
      }
    }
    .buy{
      width: 100%;
      height: 140px;
      position: relative;
      >img{
        width: 100%;
        height: 100%;
      }
      >div{
        width: 380px;
        height: 48px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: white;
        cursor: pointer;
        span{
          color: #00aeef;
          font-size: 20px;
          line-height: 48px;
          display: block;
          text-align: center;
        }
      }
    }
    .right-fixed {
      position: fixed;
      right: 10px;
      bottom: 60px;
    }
  }
</style>
